<template>
  <navigator
    :url="'/pages/goods_detail/main?goods_id=' + goods.goods_id"
    hover-class="none"
    class="navigator"
  >
    <view class="goods_item">
      <slot name="left" class="left"/>
      <image
        class="goods_image"
        mode="aspectFill	"
        :src="goods.goods_small_logo"
      />
      <view class="goods_content">
        <view class="goods_title">
          {{ goods.goods_name }}
        </view>
        <view class="goods_content_bottom">
          <view class="price">{{ goods.goods_price }}</view>
          <slot name="right" />
        </view>
      </view>
    </view>
  </navigator>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style lang="less">
.navigator{
  padding: 20rpx;
  margin: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
}
.goods_item {
  display: flex;
  height: 180rpx;
  border-radius: 10rpx;
  background-color: #fff;
  align-items: center;
  .goods_image {
    width: 180rpx;
    height: 180rpx;
    background-color: #f2f2f2;
  }
  .goods_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    height: 100%;
    justify-content: space-between;
    .goods_title {
      font-size: 28rpx;
      color: #333;
      height: 80rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .goods_content_bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 80rpx;
      width: 100%;
    }
  }
}
</style>